<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div垂直居中的几种方式</title>
</head>
<style>
    .parent{
        border:1px solid blue;
        width: 100px;
        height: 100px;
    }
    .son{
        background-color: red;
        width: 50px;
        height: 50px;
    }

    .box2:after{
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
</style>
<body>

<h3>1.支持所有浏览器支持div，图片，文字，但是不能设置固定高度，还可以不设置父元素padding，设置子元素的margin</h3>
<div style="width: 100px;border: 1px solid red;padding-bottom: 25px;padding-top: 25px " >
    <div class="son" ></div>
</div>

<h3>2.利用margin负和定位，必须要知道子元素和父元素的高度，-子元素高度/2</h3>
<div class="parent" style="position: relative " >
    <div class="son" style="position: absolute;margin:-25px 0;top:50px;"></div>
</div>

<h3>3.定位然后用auto,相对于父元素margin：auto，IE不支持</h3>
<div class="parent" style="position: relative " >
    <div class="son" style="position: absolute;margin: auto 0;top: 0;bottom: 0"></div>
</div>

<h3>4.flex布局，IE不支持</h3>
<div class="parent" style="display: flex;align-items:center" >
    <div class="son"></div>
</div>

<h4>5和5.2一样的原理，支持图片，文字，div及三种并列，不支持IE</h4>
<h3>5.增加伪类</h3>
<div class="parent box2" >
    <div class="son" style="display: inline-block;vertical-align: middle"></div>
</div>
<h3>5.2增加空白元素</h3>
<div class="parent">
    <div class="son" style="display: inline-block;vertical-align: middle"></div>
    <span style="display: inline-block;height: 100%;vertical-align: middle"></span>
</div>

<h4>6和6.2一样的原理，支持图片，文字，div</h4>
<h3>6.设置表格样式，IE不支持</h3>
<div class="parent" style="display: table-cell;vertical-align: middle">
    <div class="son"></div>
</div>
<h3>6.2.直接加表格，支持IE</h3>
<div class="parent">
    <table width="100%" height="100%">
        <tr>
            <td>
                <div class="son"></div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>